<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>login</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css"
          href="css/style.css"/>
</head>

<body>
<div id="wrap">
    <div id="top_content">
        <div id="header">
            <div id="rightheader">
                <p>
                    {{time}}
                    <br/>
                </p>
            </div>
            <div id="topheader">
                <h1 id="title">
                    <a href="#">员工管理系统</a>
                </h1>
            </div>
            <div id="navigation">
            </div>
        </div>
        <div id="content">
            <p id="whereami">
            </p>
            <h1>
                欢迎来到员工管理系统！
            </h1>
            <form action="emplist.html" method="post">
                <table cellpadding="0" cellspacing="0" border="0"
                       class="form_table">
                    <tr>
                        <td valign="middle" align="right">
                            用户名:
                        </td>
                        <td valign="middle" align="left">
                            <input type="text" class="inputgri" v-model="user.username" name="name"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">
                            密码:
                        </td>
                        <td valign="middle" align="left">
                            <input type="password" class="inputgri" v-model="user.password" name="pwd"/>
                        </td>
                    </tr>
                </table>
                <p>
                    <input type="button" @click="login" class="button" value="登陆 &raquo;"/>
                    &nbsp;&nbsp;
                    <a href="/regist.html">注册</a>
                </p>
            </form>
        </div>
    </div>
    <div id="footer">
        <div id="footer_bg">
            545394882@qq.com
        </div>
    </div>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#wrap",
        data: {
            user: {},//用来保存用户数据
            time: ""
        },
        methods: {
            //用户登录
            login() {
                //发送登录请求
                axios.post("http://localhost:8989/user/login", this.user).then(res => {
                    console.log(res.data);
                    if (res.data.state) {
                        //将登录用户信息放入localStorage key  value
                        localStorage.setItem("user", JSON.stringify(res.data.user));
                        location.href = "/emplist.html";
                    } else {
                        alert(res.data.msg);
                    }
                });
            },
            gettime() {
                var today = new Date();
                var year = today.getFullYear();
                var month = (today.getMonth() + 1) < 10 ? '0' + (today.getMonth() + 1) : (today.getMonth() + 1);
                var day = (today.getDate()) < 10 ? '0' + (today.getDate()) : (today.getDate());
                date1 = year + "-" + month + "-" + today.getDate();
                this.time = date1;

            }
        },
        created() {
            this.gettime();
        }
    });
</script>